.todoItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx;
    background-color: #bdd1e9;
    color: #2f3e75;
    border-radius: 24rpx;
    margin-top: 20rpx;
    height: 120rpx;
    .todoItemImage {
        padding-right: 24rpx;
        image {
            width: 80rpx;
            height: 80rpx;
            display: block;
        }
    }
    .todoItemContent {
        flex: 1;
        font-size: 24rpx;
        .todoItemTitle {
            font-size: 30rpx;
            margin-bottom: 10rpx;
        }
        .todoItemInfo {
            display: flex;
        }
        .todoItemDuration {
            padding-right: 24rpx;
            border-right: 2px solid #2f3e75;
        }
        .todoItemflexibility {
            padding-left: 24rpx;
        }
    }
    .todoItemIndicator {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #2f3e75;
        border-radius: 50%;
        padding: 8rpx;

        image {
            width: 30rpx;
            height: 30rpx;
            display: block;
        }
    }
    &.completed {
        background: #f5f5f5;
        color: #bcbcbc;

        .todoItemDuration {
            border-color: #bcbcbc;
        }

        .todoItemIndicator {
            background: #bcbcbc;
        }
    }
}
